{% extends "base.html" %}

{% load django_markdown %}

{% block extra_head %}
    
{% endblock %}

{% block content %}

    {% if success %}
        <div class="alert alert-success alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <strong>Well done! </strong> 你已经成功删除了这篇博客.
        </div>
    {% endif %}

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">警告</h4>
          </div>
          <div class="modal-body">
            <p>确定忍心删除这篇博客吗？删除后不可恢复，请慎重选择！</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="modal-delete">删除</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->    

  <p class="text-right">
      <a class="btn btn-primary" href="{% url 'blog:edit' %}">写博客</a>
  </p>
  <div class="container">
      <table class="table table-striped">
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>作者</th>
            <th>发布日期</th>
            <th>编辑</th>
            <th>删除</th>
        </tr>
        {% for blog in blog_list %}
        <tr>
            <td>{{ blog.id }}</td>
            <td><a href="{% url 'blog:detail' blog.id %}"> {{ blog.title }} </a></td>
            <td>{{ blog.author.username }}</td>
            <td>{{ blog.pubdate }}</td>
            <td><a href="{% url 'blog:edit' blog.id %}" >编辑</a></td>
            <td><a href="" data-toggle="modal" data-id='{{ blog.id }}' data-target="#myModal">删除</a></td>
        </tr>
        {% endfor %}
      </table>
  </div>
{% endblock %}

{% block extra_footer %}
    <script>
        $('#myModal').on('shown.bs.modal', function (e) {
            var id = $(e.relatedTarget).data('id');
            $('#modal-delete').data('id',id);
        })
        
        //$('#modal-delete').on('click', function(e){
        $('#modal-delete').click( function(e){
            var id = $(this).data('id')
            $.get("delete/" + id);
            $('#myModal').modal('hide');
        })
    </script>
{% endblock %}
